<template>
	<view class="list-main">
		<template v-if="list.length === 0">
			<nodata></nodata>
		</template>
		<template v-else>
			<view class="list-item" v-for="item in list" :key="item.caseId" @click="go_to_case_main(item)">
				<image class="cover" mode="aspectFill" :src="item.caseCoverImg.url"></image>
				<view class="info">
					<view class="name" v-text="item.caseMainTitle"></view>
					<template v-if="item.caseSubTitle">
						<view class="sub"  v-text="item.caseSubTitle"></view>
						<view class="txt" v-if="item.caseText" v-text="item.caseText"></view>
					</template>
					<template v-else>
						<view class="txt txt1" v-if="item.caseText" v-text="item.caseText"></view>
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import nodata from '../../common/nodata/index.vue'; 
	import {get_case_list, apiBase} from '../../request/index.js'
	export default {
		components:{nodata},
		data() {
			return {
				list : []
			}
		},
		onLoad() {
			this.get_case_list();
		},
		methods: {
			go_to_case_main(item){
				uni.navigateTo({
					url:"/pages/casemain/casemain?caseId=" + item.caseId
				});
			},
			async get_case_list (){
				try{
					const res = await get_case_list();
					if(res.success){
						this.list = res.data.map(d => {
							const cae = {...d};
							cae.caseCoverImg.url = apiBase + cae.caseCoverImg.url;
							return cae;
						});
					}
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style>
page{
	background-color: rgb(233, 233, 233);
}

.list-main{
	padding: 25rpx 25rpx 40rpx;
}

.list-item{
	height: 240rpx;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 25rpx;
	margin-bottom: 25rpx;
	display: flex;
}

.list-item .cover{
	width: 240rpx;
	height: 240rpx;
}

.list-item .info{
	width: calc(100% - 270rpx);
	margin-left: 30rpx;
}

.list-item .info .name{
	font-weight: bold;
	font-size: 18px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 10rpx
}

.list-item .info .sub{
	margin-bottom: 10rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: rgb(242, 114, 54);
}

.list-item .info .txt{
	overflow: hidden;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	color: #909399;
}

.list-item .info .txt1{
	-webkit-line-clamp: 4;
}
</style>
